<template>
  <div class="single">
    <el-row>
      <el-col :span="24">
        <el-form
          :model="formModel"
          :rules="rules"
          ref="formModel"
          label-width="120px"
          class="demo-formModel"
        >
          <!-- 姓名 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="姓名" prop="xm">
                <el-input v-model="formModel.xm" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="xb">
                <el-select
                  v-model="formModel.xb"
                  placeholder="性别"
                  class="el_select"
                >
                  <el-option label="未知" value="0"></el-option>
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="籍贯" prop="jg">
                <el-select
                  v-model="formModel.jg"
                  placeholder="请选择籍贯"
                  class="el_select"
                >
                  <el-option
                    v-for="item in cityList"
                    :label="item.name"
                    :value="item.name"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 出生日期 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="出生日期" prop="csrj">
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择出生日期"
                  v-model="formModel.csrj"
                  style="width: 15rem"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="身份证号" prop="sfzh">
                <el-input v-model="formModel.sfzh" placeholder="请输入身份证号" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出生地" prop="csdz">
                <el-select
                  v-model="formModel.csdz"
                  placeholder="请选择出生地"
                  class="el_select"
                >
                  <el-option
                    v-for="item in cityList"
                    :label="item.name"
                    :value="item.name"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 名族 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="名族" prop="mz">
                <el-select
                  v-model="formModel.mz"
                  placeholder="请选择名族"
                  class="el_select"
                >
                  <el-option
                    v-for="item in famousList"
                    :label="item.name"
                    :value="item.name"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="政治面貌" prop="zzmm">
                <el-select
                  v-model="formModel.zzmm"
                  placeholder="请选择政治面貌"
                  class="el_select"
                >
                  <el-option
                    v-for="item in politicalList"
                    :label="item.name"
                    :value="item.name"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="婚姻状况" prop="hyzk">
                <el-select
                  v-model="formModel.hyzk"
                  placeholder="请选择婚姻状况"
                  class="el_select"
                >
                  <el-option
                    v-for="item in marriageList"
                    :label="item.name"
                    :value="item.name"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 参加工作年月 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="参加工作年月" prop="cjgzsj">
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择参加工作年月"
                  v-model="formModel.cjgzsj"
                  style="width: 15rem"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="进本校年月" prop="jbxsj">
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择进本校年月"
                  v-model="formModel.jbxsj"
                  style="width: 15rem"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="教职工类别" prop="jzglb">
                <el-select
                  v-model="formModel.jzglb"
                  placeholder="请选择教职工类别"
                  class="el_select"
                >
                  <el-option
                    v-for="item in worksList"
                    :label="item.name"
                    :value="item.name"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 现任岗位类别 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="是否在编" prop="iszb">
                <el-select
                  v-model="formModel.iszb"
                  placeholder="请选择是否在编"
                  class="el_select"
                >
                  <el-option
                    v-for="item in stayList"
                    :label="item.name"
                    :value="item.name"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="人员状态" prop="technicalTitle">
                <el-select
                  v-model="formModel.technicalTitle"
                  placeholder="请选择专业技术职称"
                  class="el_select"
                >
                  <el-option
                    v-for="item in stateList"
                    :label="item.name"
                    :value="item.name"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="银行卡号" prop="yhkh">
                <el-input v-model="formModel.yhkh" class="el_select" placeholder="请输入银行卡号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 开户行 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="开户行" >
                <el-input v-model="formModel.khy" class="el_select" placeholder="请输入开户行"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号" prop="sj">
                <el-input v-model="formModel.sj" class="el_select" placeholder="请输入手机号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="教师类别" prop="jslb">
                <el-select
                  v-model="formModel.jslb"
                  placeholder="请选择教师类别"
                  class="el_select"
                >
                  <el-option
                    v-for="item in teachtypeList"
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 教师识别编号 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="教师识别编号" prop="sbbh">
                <el-input v-model="formModel.sbbh" class="el_select" placeholder="请输入教师识别编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="国籍" prop="gj">
                <el-select
                  v-model="formModel.gj"
                  placeholder="请选择国籍"
                  class="el_select"
                >
                  <el-option
                    v-for="item in cityList"
                    :label="item.name"
                    :value="item.name"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 证件照 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="证件照" >
                <el-upload
                  class="avatar-uploader"
                  action=""
                  accept="image/jpeg,image/jpg,image,png"
                  :show-file-list="false"
                  :http-request="submitUploadImgUrl"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="formModel.photo1" :src="formModel.photo1" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生活照" >
                <el-upload
                  class="avatar-uploader"
                  action=""
                  accept="image/jpeg,image/jpg,image,png"
                  :show-file-list="false"
                  :http-request="submitUploadImgUrl2"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="formModel.photo2" :src="formModel.photo2" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="btns">
            <el-col :span="24"> 
              <el-form-item>
              <el-button type="primary" @click="submitForm('formModel')"
                >{{btnname}}</el-button
              >
              <el-button @click="resetForm('formModel')">重置</el-button>
          </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name:"single",
  data() {
    return {
      btnname:"保存",
      cityList: [
        { name: "中国", val: 0 },
        { name: "香港", val: 1 },
      ],
      famousList: [
        { name: "汉族", val: 0 },
        { name: "壮族", val: 1 },
      ],
      politicalList: [
        { name: "共产党员", val: 0 },
        { name: "中央预备党员", val: 1 },
        { name: "共青团员", val: 2 },
        { name: "民革党员", val: 3 },
        { name: "民革盟员", val: 4 },
        { name: "民建会员", val: 5 },
        { name: "名进会员", val: 6 },
        { name: "农工党党员", val: 7 },
        { name: "致工党党员", val: 8 },
        { name: "九三学社社员", val: 9 },
        { name: "台盟盟员", val: 10 },
        { name: "无党派人士", val: 11 },
        { name: "群众", val: 12 },
      ],
      marriageList: [
        { name: "已婚", val: 0 },
        { name: "未婚", val: 1 },
      ],
      educationList: [
        { name: "小学", val: 0 },
        { name: "大学", val: 1 },
      ],
      worksList: [
        { name: "类别1", val: 0 },
        { name: "类别2", val: 1 },
      ],
      stayList: [
        { name: "否", val: 0 },
        { name: "在", val: 1 },
      ],
      stateList: [
        { name: "休职", val: 0 },
        { name: "在职", val: 1 },
      ],
      teachtypeList:[],
      schoolList: [
        { name: "xxx学院", val: 0 },
        { name: "xxx学院", val: 1 },
      ],

      imageUrl: '',
      formModel: {
        sfzh:"",
        photo1:"",
        photo2:"",
        xm: "",
        xb:"",
        city: 0,
        csrj:"",
        jg:"",
        csdz:"",
        mz:"",
        zzmm:"",
        hyzk:"",
        cjgzsj:"",
        jbxsj:"",
        jzglb:"",
        iszb:"",
        yhkh:"",
        technicalTitle:"",
        jslb:"",
        sj:"",
        sbbh:"",
        gj:"",
      },
      rules: {
        xm: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
        ],
        sfzh: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ],
        sbbh: [
          { required: true, message: "请输入教师识别编号", trigger: "blur" },
        ],
        sj: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        yhkh: [
          { required: true, message: "请输入银行卡号", trigger: "blur" },
        ],
        photo1: [
          { required: true, message: "请上传证件照", trigger: "change" },
        ],
        xb: [
          { required: true, message: "请选择性别", trigger: "change" },
        ],
        gj: [
          { required: true, message: "请选择国籍", trigger: "change" },
        ],
        csrj: [
          {
            type: "string",required: true,message: "请选择日期",trigger: "change", 
          },
        ],
        cjgzsj: [
          {
            type: "string",required: true,message: "请选择参加工作年月",trigger: "change", 
          },
        ],
        jbxsj: [
          {
            type: "string",required: true,message: "请选择进本校年月",trigger: "change", 
          },
        ],
        jg: [
          { required: true, message: "请选择籍贯", trigger: "change" },
        ],
        csdz: [
          { required: true, message: "请选择出生地", trigger: "change" },
        ],
        mz: [
          { required: true, message: "请选择名族", trigger: "change" },
        ],
        zzmm: [
          { required: true, message: "请选择政治面貌", trigger: "change" },
        ],
        hyzk: [
          { required: true, message: "请选择婚姻状况", trigger: "change" },
        ],
        mechanism: [
          { required: true, message: "请输入获得最高学历院校", trigger: "change" },
        ],
        jslb: [
          { required: true, message: "请选择教师类别", trigger: "change" },
        ],
        jzglb: [
          { required: true, message: "请选择教职工类别", trigger: "change" },
        ],
        iszb: [
          { required: true, message: "请选择是否在编", trigger: "change" },
        ],
        technicalTitle: [
          { required: true, message: "请选择专业技术职称", trigger: "change" },
        ],

      },

      page:{
        id:"",
        op:"add"
      },

    };
  },
  computed: {
    userdata() {
      //左侧菜单状态发生变化
      return this.$store.state.user.jsid
    }
  },
  watch: {
    userdata(n, m) {
      this.initdata();
    }
  },
  mounted () {
    this.initdata();
  },
  methods: {
    get_t_list(){
      //列表数据
      this.$http({
              url: this.$http.adornUrl('js/list'),
              method: 'get',
              data: this.$http.adornData(this.formModel)
            }).then(({data}) => {
              if (data && data.code === 0) {
                var tableData=data.data.list;
                tableData.forEach(item=>{
                  var id=JSON.parse(item.id);
                  if(id==this.page.id){
                    console.log(item);
                    this.formModel=item;

                  }
                });
              } else {
                this.$message.error(data.msg)
          }
      })
    },
    initdata(){
      var params=this.$route.params;
      console.log(params);
      this.page.id=params.id;
      this.page.op=params.op;

      //教师类别列表
      this.$http({
              url: this.$http.adornUrl('jslb/list'),
              method: 'get',
            }).then(({data}) => {
              if (data && data.code === 0) {
                // console.log(data.data);
                this.teachtypeList=data.data.list;
              } else {
                this.$message.error(data.msg)
          }
      })
      this.btnname=this.page.op=="detail"?"修改":"保存";
      this.$refs['formModel'].resetFields();
      //获取详情数据
      if(this.page.op=="detail"){

        this.get_t_list();

      //   var params={id:this.page.id};
      //   this.$http({
      //         url: this.$http.adornUrl('js/info/'+this.page.id),
      //         method: 'get',
      //       }).then(({data}) => {
      //         if (data && data.code === 0) {
      //           console.log(data.data);
                
      //         } else {
      //           this.$message.error(data.msg)
      //     }
      // })
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.formModel.csrj=this.dateFormat(this.formModel.csrj);
          this.formModel.jsid=this.page.id;
          var formdata=new FormData();
          formdata.append("sfzh",this.formModel.sfzh);
          formdata.append("xm",this.formModel.xm);
          formdata.append("xb",this.formModel.xb);
          formdata.append("city",this.formModel.city);
          formdata.append("csrj",this.formModel.csrj);
          formdata.append("jg",this.formModel.jg);
          formdata.append("csdz",this.formModel.csdz);
          formdata.append("mz",this.formModel.mz);
          formdata.append("zzmm",this.formModel.zzmm);
          formdata.append("hyzk",this.formModel.hyzk);
          formdata.append("cjgzsj",this.formModel.cjgzsj);
          formdata.append("jbxsj",this.formModel.jbxsj);
          formdata.append("jzglb",this.formModel.jzglb);
          formdata.append("iszb",this.formModel.iszb);
          formdata.append("yhkh",this.formModel.yhkh);
          formdata.append("jslb",this.formModel.jslb);
          formdata.append("sj",this.formModel.sj);
          formdata.append("sbbh",this.formModel.sbbh);
          formdata.append("gj",this.formModel.gj);
          // var params=this.get_formdata(this.formModel);
          this.$http({
              url: this.$http.adornUrl('/js/update'),
              method: 'post',
              data: formdata
              // data: this.$http.adornData(this.formModel)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                })
              } else {
                this.$message.error(data.msg)
              }
            })

        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //数据格式转换
    get_formdata(config){
      console.log(config);
      //对象转formdata格式
      const formData = new FormData();
      //循环传入的值转换formData
      Object.keys(config).forEach((key) => {
        formData.append(key, config[key]);
      })
      return formData;
    },
    //上传图片
    submitUploadImgUrl(param){
      var that=this;
      let formData=new FormData();
      formData.append("file",param.file);
      this.$http({
              url: this.$http.adornUrl('/file/upload'),
              method: 'post',
              data: formData
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '上传成功',
                  type: 'success',
                  duration: 1500,
                })
                that.formModel.photo1=data.data.data[0];
                
              } else {
                this.$message.error(data.msg)
              }
            })
    },
    //上传图片2
    submitUploadImgUrl2(param){
      let formData=new FormData();
      formData.append("file",param.file);
      this.$http({
              url: this.$http.adornUrl('/file/upload'),
              method: 'post',
              data: formData
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '上传成功',
                  type: 'success',
                  duration: 1500,
                })
                this.formModel.photo2=data.data.data[0];
                console.log(this.formModel.photo2);
              } else {
                this.$message.error(data.msg)
              }
            })
    },
    handleAvatarSuccess(res, file) {
        this.formModel.photo1 = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      dateFormat: function(createTime) {
        var t = new Date(createTime)
        if(!t){
          return ''
        }
        let year = t.getFullYear()
        let month = this.dateIfAddZero(t.getMonth()+1)
        let day = this.dateIfAddZero(t.getDate())
        // let hours = this.dateIfAddZero(t.getHours())
        // let minutes = this.dateIfAddZero(t.getMinutes())
        // let seconds = this.dateIfAddZero(t.getSeconds())
        return year + '-' + month + '-' + day
      },
      dateIfAddZero : function (time) {
        return time < 10 ? '0'+ time : time
      }

  },
};
</script>


<style >
.single {
  padding: 0.5rem;
}
#teacher1 {
  margin-left: 5rem;
}
.el_select {
  width: 15rem !important;
}

.btns{
  padding-left: 22rem;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>

